<template>
  <transition name="fade">
    <div
      v-if="visible"
      class="context-menu"
      :style="{
        left: position.x + 'px',
        top: position.y + 'px',
        position: 'fixed',
        zIndex: 9999,
      }"
      @click.stop
    >
      <ul>
        <li
          v-for="(item, index) in menuItems"
          :key="index"
          class="menu-item"
          @click="handleMenuItemClick(item)"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
  </transition>
</template>

<script setup>
import { defineProps } from "vue";

// 定义 props
const props = defineProps({
  menuItems: {
    type: Array,
    required: true,
    default: () => [],
  },
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  position: {
    type: Object,
    required: true,
    default: () => ({ x: 0, y: 0 }),
  },
  data: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  onClose: {
    type: Function,
    required: true,
  },
});

// 处理菜单项点击
const handleMenuItemClick = (item) => {
  // 执行菜单项的动作
  if (typeof item.action === "function") {
    item.action(props.data, item);
  }

  // 关闭菜单（通过父组件传递的 onClose 方法）
  props.onClose();
};

// 不再需要暴露 show/hide 方法
</script>

<style scoped>
.context-menu {
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 5px 0;
  min-width: 150px;
}

.menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  list-style: none;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
